<template>
    <!-- 总容器 -->
    <div class="wrapper">
        <header>
            <i class="fa fa-angle-left" onclick="history.go(-1)"></i>
            <p>选择体检套餐</p>
            <div></div>
        </header>
        <div class="top-ban"></div>

        <ul class="setmeal">
            <li v-for="(setmeal, index) in setmealList" :key="index">
                <div class="item">
                    <div class="item-left" @click="toselectdate(setmeal.smid)">
                        <h3>{{ setmeal.name }}</h3>
                    </div>
                    <div class="item-right" @click="toggleDetails(index)">
                        <p>详情</p>
                        <i
                            class="fa"
                            :class="{'fa-angle-down': !expandedItems[index], 'fa-angle-up': expandedItems[index]}"
                        ></i>
                    </div>
                </div>

                <div class="item-content" v-if="expandedItems[index]">
                    <table>
                        <thead>
                            <tr>
                                <th>检查项目</th>
                                <th>检查内容</th>
                                <th>检查意义</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="(check, index) in setmeal.checkitems">
                                <td>{{ check.ciname }}</td>
                                <td>{{ check.cicontent }}</td>
                                <td>{{ check.meaning }}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </li>
        </ul>

        <div class="bottom-ban"></div>
        <tijianfooter></tijianfooter>
    </div>
</template>
<script setup>
import "../style/css/setmeal.css";
import tijianfooter from "@/components/tijianfooter.vue";
import {getSessionStorage} from "@/utils/common";
import {reactive, ref,onMounted} from "vue";
import axios from "axios";
import {useRoute, useRouter} from "vue-router";
// 定义变量66
const router = useRouter();
const route = useRoute();
const setmealList = ref([]);
onMounted(async () => {
    await axios.post("/api/setmeal/getAll",{ type:getSessionStorage("user").sex })
       .then((res) => {
        setmealList.value = res.data.data;
    });
});
const expandedItems = ref({})

const toggleDetails = (index) => {
    expandedItems.value[index] = !expandedItems.value[index];
};
function toselectdate(setmealId) {
    router.push({
        path: "/selectdate",
        query: {
            hospitalId: route.query.hospitalId,
            setmealId: setmealId,
        },
    });
}
</script>
